
<template>
    <div class="header-wrap">
        <div class="header-fixed">
            <div class="flex ali-c">
                <router-link to="/index" class="cfff">
                    <h3 class="logo">
                        <img src="@/static/images/xszklogo.png" class="img100">
                    </h3>
                </router-link>
                <h3 class="fs18 ml20">司法实务专题资源</h3>
            </div>
            <div class="flex ali-c jus-b">
                <div class="head-search" v-if="isHeadSearch">
                    <input type="text" placeholder="搜全库资源" class="head-input">
                    <img src="@/static/images/search_head.jpg" class="head-img">
                </div>
                <el-dropdown @command="handleCommand">
                    <div class="flex ali-c cp" @click="onLogin">
                        <div class="user-tx">
                            <img :src="user.img" class="img100">
                        </div>
                        <h3 class="fs16 ml10 cfff">{{user.name}}</h3>
                    </div>
                    <el-dropdown-menu slot="dropdown" :class="{'hidden-popper no-popper-arrow':!token}">
                        <template v-if="token">
                            <el-dropdown-item
                                v-for="(item,index) in menuList"
                                :key="index"
                                :command="item.path"
                                :icon="item.path==null?'el-icon-switch-button':''"
                            >
                                {{item.name}}
                            </el-dropdown-item>
                        </template>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            
        </div>
        <el-dialog
            :visible.sync="getIsLoginShow"
            :show-close="false"
            :lock-scroll="false"
            :append-to-body="true"
            custom-class="customWidth"
            @close="onClose"
        >    
            <xszk-login
                :isShow="isShow"
                :count="count"
                :isLoginSucc="isLoginSucc"
                @handleLogin="handleLogin"
                @getImgCode="getImgCode"
            ></xszk-login> 
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "xszkHeader",
    props:{
        isHeadSearch:{
            type:Boolean,
            default:false
        },
        isLoginShow:{
            type:Boolean,
            default:false
        }
    },
    components:{
        xszkLogin: (resolve) =>require([ "@/components/xszkLogin",], resolve),
    },
    computed: {
        oriClassList: {
            get() {
                return this.$store.getters.oriClassList;
            },
            set(val) {},
        },
        classList: {
            get() {
                return this.$store.getters.classList;
            },
            set(val) {},
        },
        userInfo:{
            get() {
                return this.$store.getters.userInfo;
            },
            set(val) {},
        },
        token:{
            get() {
                return this.$store.getters.token;
            },
            set(val) {},
        },
        getIsLoginShow:{
            get(){
                return this.isLoginShow;
            },
            set(val) {},
        }
    },
    data() {
        return {
            menuList:[
                {name:'我的收藏',path:'/profile/collection'},
                {name:'我的笔记',path:'/profile/note'},
                {name:'阅读历史',path:'/profile/history'},
                {name:'我的书签',path:'/profile/bookMark'},
                {name:'购买记录',path:'/profile/record'},
                {name:'退出',path:null},
            ],
            isLoginSucc:false,
            userCodeId:'',
            isShow: true,
            count: 0,
            timer: null,
            user:{
                name:'登录',
                img: require('@/static/images/default_tx.png')
            }
            
        };

    },
    methods: {
        setUserInfo(val){
            this.$store.dispatch("setUserInfo", val);
        },
        setToken(val){
            this.$store.dispatch("setToken", val);
        },
        setOriClassList(val){
            this.$store.dispatch("setOriClassList", val);
        },
        setClassList(val){
            this.$store.dispatch("setClassList", val);
        },
        handleCommand(path){
            if(path==null){
                this.logout();
            }else{
                this.$router.push(path);
            }
        },
        onLogin(){
            if(this.token){
                this.$router.push('/profile');
                return false;
            }
            this.$emit('onLogin');
        },
        onClose(){
            this.$emit('onClose');
        },
        // 分类导航
        getNavList(){
            let that = this;
            let data = {
                type:'column',
                pid:'root'
            };
            this.request.getNavList(data, (res)=> {
                if (res.code == "0") {
                    let getClassList = [];
                    let resData = res.data;
                    getClassList = [{name:"全部",_id:"all",pid:'root',number:0},...resData];
                    getClassList[2].name = "法律法规";
                    that.setOriClassList(getClassList);//原始数据
                    that.setClassList(getClassList.slice(0,8));//目标数据
                } else {
                    that.toast.error(res.message);
                }
            });
        }, 
        //登录注册
        handleLogin(userTel,userCode) {
            this.sendLogin(userTel,this.userCodeId,userCode);
        },
        //获取一个随机的三位数0.03
        getRandomNum(){
            let random = 0;
            let arr = [];
            for (let i=0;i<3;i++) {
                do{
                    random = Math.floor(Math.random()*9)+1;
                } 
                while(arr.indexOf(random)!=-1)
                arr.push(random);
            }
            return Number(arr.join(""))/1000;
        },
        //先得到图文验证码
        getImgCode(userTel){
            //验证码倒计时
            if (!this.timer) {
                let data = { 
                    code: this.getRandomNum(),
                };
                let that = this;
                this.request.getImgCode(data, function (res) {
                    if (res.code == "0") {
                        let resData = res.data;
                        if(resData!=null){
                            that.onSendCode(userTel,resData.code_id,resData.code_value);
                        }else{
                            that.toast.error(res.message);
                        }
                    } else {
                        that.toast.error(res.message);
                    }
                });
            }
        },
        onSendCode(userTel,codeId,codeVal) {
            let data = `phone=${userTel}&code_id_img=${codeId}&code_val_img=${codeVal}&not_check_user_exist=1`;
            let that = this;
            this.request.sendSms(data, function (res) {
                if (res.code == "0") {
                    let resData = res.data;
                    if(resData!=null){
                        that.userCodeId = resData.code_id;
                        that.toast.success(res.message);
                        that.count = 60;
                        that.isShow = false;
                        that.timer = setInterval(() => {
                            if (that.count > 0 && that.count <= 60) {
                                that.count--;
                            } else {
                                that.isShow = true;
                                clearInterval(that.timer);
                                that.timer = null;
                            }
                        }, 1000);
                    }else{
                        that.toast.error(res.message);
                    }
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        sendLogin(userTel,userCodeId,userCode){
            let that = this;
            let data = `phone=${userTel}&platform=web&code_id=${userCodeId}&code_val=${userCode}`;
            this.request.login(data, function (res) {
                if (res.code == "0") {
                    let resData = res.data;
                    that.timer = null;
                    that.isShow = true;
                    that.count = 0;
                    if(resData!=null){
                        that.isLoginSucc = true;
                        that.user.name = resData.user.nick_name?resData.user.nick_name:resData.user.name;
                        that.user.img = resData.user.picture_absolute?resData.user.picture_absolute:require('@/static/images/default_tx.png');
                        that.getIsLoginShow = false;
                        that.toast.success(res.message);
                        that.setToken(resData.token);
                        that.setUserInfo(resData);
                        that.$router.go(0);//刷新页面
                    }else{
                        that.toast.error(res.message);
                    }
                } else {
                    that.timer = null;
                    that.isShow = true;
                    that.count = 0;
                    that.toast.error(res.message);
                }
            });
        },
        logout(){
            let that = this;
            this.request.logout({}, function (res) {
                if (res.code == "0") {
                    that.toast.success("退出登录成功");
                    setTimeout(() => {
                        that.stringutils.clearData();
                        that.$router.go(0);//刷新页面
                    }, 300);
                } else {
                    that.toast.error(res.message);
                }
            });
        },

    },
    created() {
       
    },
    watch:{
        userInfo: {
            handler(newVal,oldVal){
                if(newVal){
                    this.user.name= newVal.user.nick_name?newVal.user.nick_name:newVal.user.name;
                    this.user.img = newVal.user.picture_absolute?newVal.user.picture_absolute:require('@/static/images/default_tx.png');
                }else{
                    this.user.name = '登录';
                    this.user.img = require('@/static/images/default_tx.png');
                }
            },
            // 该回调将会在侦听开始之后被立即调用
            immediate:true,
            //该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
            deep: true
        },
        classList:{
            handler(newVal,oldVal){
                if(newVal.length==0){
                    this.getNavList();
                }
            }, 
            immediate:true,
            deep: true
        }
    }
};
</script>

<style lang="stylus" scoped>
.header-wrap
    width 100%
    height 60px
    position relative
    left 0
    top 0
    .header-fixed
        width 100%
        height 60px
        padding 0 90px
        display flex
        align-items center
        justify-content space-between
        position fixed
        left 0
        top 0
        z-index 999
        background #2C4B6D
        color #fff
        .head-search
            display flex
            align-items center
            justify-content space-between
            width 500px
            height 36px
            background #FFFFFF
            border-radius 20px
            border 1px solid #9EA6AF
            margin-right 123px
            padding-right 35px
            padding-left 26px
            .head-input
                width 360px
                height 100%
                font-size 14px
            .head-img
                cursor pointer
                flex-shrink 0
                width 24px
                height 24px
        .logo
            width 92px
            height auto
        .user-tx
            width 28px
            height 28px
            border-radius 50%
            overflow hidden
/deep/.el-dropdown-menu__item
    font-size 14px
/deep/.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover a
    color #2A58B1
/deep/.el-dialog__header
    padding 0
/deep/.el-dialog__body
    padding 0
/deep/.customWidth
    width 488px
             
</style>
